<template>
  <el-table :data="list">
    <el-table-column label="资产" min-width="20%" prop="equipment.name" />
    <el-table-column label="制造商参考编号" min-width="21%" prop="provider.name" />
    <el-table-column label="注意" min-width="17%" prop="notice" />
    <el-table-column label="数量" min-width="17%" prop="number" />
    <el-table-column label="出处" min-width="17%" prop="provenance" />
    <el-table-column label="占位符" min-width="8%">
      <template v-slot="scope">
        <el-button icon="el-icon-delete" @click="remove(scope.$index, scope.row.id)" />
      </template>
    </el-table-column>
    <div slot="append">
      <el-form :model="data" inline>
        <el-input v-model="data.id" type="hidden" />
        <el-row :gutter="10">
          <el-col :span="5">
            <el-form-item label>
              <v-select v-model="data.equipment_id" action="equipment" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label>
              <el-input v-model="data.provider_id" disabled placeholder />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label>
              <el-input v-model="data.notice" placeholder />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label>
              <el-input-number v-model="data.number" placeholder />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label>
              <el-input v-model="data.provenance" placeholder />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label>
              <el-button icon="el-icon-upload2" @click="save" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-table>
</template>

<script>
import API from '@/api/maintain/part'
import VSelect from '@/components/select'
import init from '@/mixins/init'
export default {
  name: 'PartVue',
  components: { VSelect },
  mixins: [init],
  data() {
    return {
      list: [],
      data: {}
    }
  },
  methods: {
    index() {
      API.equipments({ part_id: this.value }).then(response => {
        this.list = response.data.data
      })
    },
    save() {
      API.equipment({ part_id: this.value, ...this.data }).then(() => {
        this.index()
      })
    },
    remove(index, id) {
      API.equipmentDelete(id).then(() => {
        this.list.splice(index, 1)
      })
    }
  }
}
</script>
<style>
</style>
